<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<meta name="viewport"
		content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>音乐播放器登录页面</title>
	<!-- 1. 导入CSS的全局样式 -->
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<!-- 2. jQuery导入，建议使用1.9以上的版本 -->
	<script src="js/jquery.min.js"></script>
	<script src="js/md5.min.js"></script>
	<script type="text/javascript"></script>
	<style>
		/* 设置页面整体样式 */
		html, body {
			/* 把高度拉高,html的父元素是浏览器窗口
               height: 100% 的意思就是和浏览器窗口一样高 */
			height: 100%;
			/* 设置背景图,url() 中写图片所在位置 */
			background-image: url(/images/登录背景图2.jpg);
			/* 设置不平铺 */
			background-repeat: no-repeat;
			/* 设置位置,只写 center 就是垂直水平居中 */
			background-position: center;
			/* 铺满窗口 */
			background-size: cover;
		}
	</style>
</head>

<body id="body">
	<div class="container" style="width: 400px;margin-top: 110px;background-color: rgba(255,255,255,0.8)">
		<h3 style="text-align: center;">管理员登录</h3>
		<div class="form-group">
			<label for="user">用户名：</label>
			<input type="text" name="username" class="form-control" id="user" placeholder="请输入用户名" />
		</div>

		<div class="form-group">
			<label for="password">密码：</label>
			<input type="password" name="password" class="form-control" id="password" placeholder="请输入密码" />
		</div>

		<hr />
		<div class="form-group" style="text-align: center;"><!--class="form-group"-->
			<input style="width: 200px;height: 40px" id="submit" class="btn btn btn-primary" type="button" value="登录">
		</div>
		<!-- 出错显示的信息框 -->
		<div class="alert alert-warning alert-dismissible" role="alert">
			<button type="button" class="close" data-dismiss="alert">
				<span>&times;</span>
			</button>
			<strong id="message">您尚未进行登录，请您登录!</strong>
		</div>
	</div>

	<script>
		<!-- 核心业务逻辑 -->
		let usernameInput = document.querySelector('#user');
		let passwordInput = document.querySelector('#password');
		let buttonInput = document.querySelector('#submit');
		buttonInput.onclick = function () {
			$.ajax({
				type: 'post',
				url: '/user/login',
				data: {
					username: usernameInput.value,
					password: passwordInput.value
				},
				success: function (data) {
					console.log(data);
					if (data.status == -1) {
						alert(data.message);
						$("#message").text("账号或密码错误，请重试!");
						$("#user").val("");
						$("#password").val("");
						$("#verifycode").val("");
						return;
					}
					alert(data.message);
					location.assign('/list.html');
				},
				error: function () {
					alert("登录失败! ");
				}
			});
		}
	</script>
</body>

</html>